<div class="modal-header"
     xmlns:th="http://www.thymeleaf.org">
    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
        <span aria-hidden="true">×</span></button>
    <h4 class="modal-title" th:text="|${user.username}|">用户名</h4>
    <small th:text="|${user.nickname?:'暂未设置'} [${user.id}]|"></small>
</div>
<div class="modal-body"
     xmlns:th="http://www.thymeleaf.org">
    <div class="row">
        <div class="col-xs-12">
            <div class="list-group">
                <a href="javascript:;" class="list-group-item" title="邮箱">
                    <i class="fa fa-envelope-o i-mr10"></i><span th:text="${user.email}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="所属单位">
                    <i class="fa fa-building i-mr10"></i><span th:utext="${user.department?.name?:@iText.danger('暂无')}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="User-Agent">
                    <span class="i-mr10 i-bold">User-Agent</span><span th:utext="${user.userAgent?:@iText.danger('暂无')}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="注册IP">
                    <span class="i-mr10 i-bold">注册 IP</span><span th:text="${user.signUpIP}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="最近登陆IP">
                    <span class="i-mr10 i-bold">最近登陆 IP</span><span th:utext="${user.logInIP?:@iText.danger('暂无')}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="注册时间">
                    <span class="i-mr10 i-bold">注册时间</span><span th:utext="${@iText.format(user.createdAt)}"></span>
                </a>
                <a href="javascript:;" class="list-group-item" title="最近登陆时间">
                    <span class="i-mr10 i-bold">最近登陆时间</span><span th:utext="${@iText.format(user.logInAt)}"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <th:block th:if="${not #lists.isEmpty(user.role)}">
            <th:block th:each="role, i:${user.role}">
                <div class="col-xs-12">
                    <table class="table js-tree-table">
                        <caption th:text="${role.name}">权限名称</caption>
                        <thead>
                        <tr>
                            <th class="col-md-2">权限名称</th>
                            <th class="col-md-2">URL</th>
                            <th class="col-md-1">权限类型</th>
                            <th class="col-md-2">权限标识</th>
                        </tr>
                        </thead>
                        <tbody>
                        <th:block th:each="permission, i:${role.permissions}">
                            <tr th:attr="data-tt-id=${permission.id}, data-tt-parent-id=${permission.parent}, data-tt-branch=${permission.hasChildren}">
                                <td th:text="${permission.name}"></td>
                                <td th:text="${permission.url}"></td>
                                <td th:text="${permission.type(permission.type)}"></td>
                                <td th:text="${permission.permission}"></td>
                            </tr>
                        </th:block>
                        </tbody>
                    </table>
                </div>
            </th:block>
        </th:block>
        <th:block th:if="${#lists.isEmpty(user.role)}">
            <div class="col-xs-12">
                <p class="text-danger text-center">暂未分配角色</p>
            </div>
        </th:block>
    </div>
</div>
<!--<div class="modal-footer">-->
<!--<button class="btn btn-default pull-left" data-dismiss="modal" type="button">知道了</button>-->
<!--</div>-->
<script>
    $(function () {
        $(".js-tree-table").treetable({
            expandable: true
        });
    });
</script>